<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .box{
            border: 1px solid black;
            min-height: 400px;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li @click="page='HomePage'">首页</li>
            <li @click="page='ListPage'">列表</li>
            <li @click="page='OrderPage'">订单</li>
            <li @click="page='AboutPage'">我的</li>
        </ul>
        <div class="box">
            <!-- <home-page v-if="page=='HomePage'"></home-page>
            <list-page v-if="page=='ListPage'"></list-page>
            <order-page v-if="page=='OrderPage'"></order-page>
            <about-page v-if="page=='AboutPage'"></about-page> -->
            <!-- <home-page v-show="page=='HomePage'"></home-page>
            <list-page v-show="page=='ListPage'"></list-page>
            <order-page v-show="page=='OrderPage'"></order-page>
            <about-page v-show="page=='AboutPage'"></about-page> -->

            <!-- 
                动态组件在组件切换过程中，功能等效于v-if指令的判断，组件会在切换时执行创建或者销毁操作 
                动态组件计算是不具有自我缓存功能，动态组件的缓存需要使用 组件缓存技术改变动态组件的构建过程
            -->
            <!-- <component v-bind:is=" page "></component> -->
            <!-- 
                组件缓存技术
                    是通过 keep-alive 包裹动态组件 标签 component,实现修改动态组件切换的功能
                    而被包裹的动态组件进行组件渲染加载时，第一次依然会完成组件创建
                                                        后续切换过程中，组件不会被销毁也不会被再次创建
                    keep-alive只是在内存层面阻止了component的组件销毁和反复创建，但并没有改变页面元素的删除和替换
                    keep-alive默认会对所有的动态组件都完成缓存操作，实际项目中有些组件需要缓存，而有些组件不需要缓存【详情页-页面加载时请求数据】
                        + keep-alive 通过 exclude 描述不需要被缓存的动态组件；通过 include 描述需要被缓存的动态组件；
                        + keep-alive 通过 max 描述最大缓存量，超过缓存的时候，会优先请求最先被缓存的组件
            -->
            <!-- <keep-alive exclude="OrderPage,AboutPage">
                <component v-bind:is=" page "></component>
            </keep-alive> -->
            <keep-alive max="2">
                <component v-bind:is=" page "></component>
            </keep-alive>
        </div>
    </div>
    <script type="module"> 
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        import HomePage from "./components/HomePage.js";
        import ListPage from "./components/ListPage.js"
        import OrderPage from "./components/OrderPage.js"
        import AboutPage from "./components/AboutPage.js"

        createApp({
            components: {
                HomePage,ListPage,OrderPage,AboutPage
            },
            data(){
                return {
                    page:"HomePage"
                }
            }
        }).mount("#app")
    </script>
</body>
</html>